<template>
    <div>
        <!-- 这里做一个递归组件 
            组件自身调用组件自身
        -->
        <div class="item"
            v-for="(item,index) in list" :key="index"
        >
            <div class="item-title border-bottom">
                <span class="item-title-icon"></span>
                {{item.title}}
            </div>
            <div
            class="item-children" 
            v-if="item.children">
                <detail-list :list="item.children"></detail-list>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'DetailList',  //这个名字是为了使用递归组件来用的
    props:{
        list:Array
    }
   
}
</script>
<style lang="stylus" scoped>
    @import "~styles/varibales.styl"

    .item-title 
        line-height :.8rem
        font-size : .32rem
        padding : 0 .2rem
        .item-title-icon
                display: inline-block;
                position: relative
                left : .06rem
                top : .06rem
                width: .36rem;
                height: .36rem;
                line-height :.36rem
                background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
                margin-right: .1rem;
                background-size: .4rem 3rem;
    .item-children
        padding :0 .2rem

</style>